<template>
<div class="page-container-padding">
  <!-- 查询条件 -->
  <div>
    <span>日期</span>
    <span>
      <el-date-picker
      style="width:220px;margin-left:6px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        :clearable="false"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="queryOndutyMsg">查询</el-button></span>
    <span style="margin-left:6px;"><el-button type="danger" size="mini" @click="toDeleteMany">批量删除</el-button></span>
  </div>
  <div style="line-height:24px;margin:5px 0;">
    查询结果中本月值班信息计数: <span style="color:#FF430D;font-weight:700;font-size:16px">{{ currentMonthCount }}</span>
  </div>
  <!-- 显示数据 -->
  <div>
    <div v-if="messageList.length>0">
      <div>
        <div class="msg-box" v-for="msgItem,index in messageList" :key="index">
          <div class="msg-title">
            <span>{{ msgItem.create_date }}</span>
            <span class="msg-action"><i class="el-icon-delete-solid" @click="toDeleteMessage(msgItem)"></i></span>
          </div>
          <div class="msg-content">{{ msgItem.content }}</div>
        </div>
      </div>
      <el-pagination style="margin-top:5px;"
        background
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChange">
      </el-pagination>
    </div>
    <div v-else>
      <el-empty description="查询条件无数据"></el-empty>
    </div>
  </div>
</div>
</template>

<script>
import { getMonthDatePoint,datetimeToStr } from '@/utils/datetimeUtils'
import { getMyOndutyMsg, deleteMyOndutyMsg } from '@/api/departmentWork/ondutyMessage'
export default {
  data(){
    return {
      dateRange: [],
      page: 1,
      pageSize: 50,
      totalCount: 0,
      messageCache: [],
      messageList: [],
      currentMonthCount: 0,
      needTotalCount: 0
    }
  },
  mounted() {
    this.setCurrentDates()
    this.queryOndutyMsg()
  },
  methods:{
    setCurrentDates(){
      let flag = new Date().getDate() < 3?'previous':'current'
      this.dateRange = getMonthDatePoint(new Date(), flag)
    },

    queryOndutyMsg(){
      const params = {
        start: datetimeToStr(this.dateRange[0], true, ''),
        end: datetimeToStr(this.dateRange[1], true, '')
      }
      getMyOndutyMsg(params).then(res => {
        this.messageCache = res.data.data
        this.totalCount = this.messageCache.length
        this.currentMonthCount = res.data.count
        this.messageList = this.handleMessageToShow()
      })
    },

    // 处理显示的数据
    handleMessageToShow(){
      const startIndex = (this.page - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      return this.messageCache.slice(startIndex, endIndex)
    },

    // 删除短讯通
    toDeleteMessage(msg){
      const paramData = {
        start: null,
        end: null,
        mid: msg.id
      }
      this.$baseConfirm('您的删除操作将不可恢复！确定吗？', null, () => {
        deleteMyOndutyMsg(paramData).then(res => {
          this.$baseMessage(res.msg, res.code===200?'success':'error')
           if (res.code === 200){
             this.queryOndutyMsg()
           }
        })
      })
    },

    // 批量删除
    toDeleteMany(){
      const paramData = {
        start: datetimeToStr(this.dateRange[0], true, '-'),
        end: datetimeToStr(this.dateRange[1], true, '-'),
        mid: null
      }
      const confirmTip = `您将删除${paramData.start}至${paramData.end}的记录，删除不可恢复！确定吗？`
      this.$baseConfirm(confirmTip, null, () => {
        deleteMyOndutyMsg(paramData).then(res => {
          this.$baseMessage(res.msg, res.code===200?'success':'error')
          if (res.code === 200){
            this.queryOndutyMsg()
          }
        })
      })
    },

    // 页码改变
    currentPageChange(page){
      this.page = page
      this.messageList = this.handleMessageToShow()
    }
  }
}
</script>

<style scoped lang="scss">
.show-action{opacity: 1;}
.msg-box{
  margin-bottom: 15px;
  padding: 10px;
  border-radius:4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  &:hover{
    background-color:rgba(0,0,0,0.1);
    .msg-title .msg-action{
      @extend .show-action;
    }
  }
  .msg-title{
    color: #0073FC;
    font-weight: 700;
    font-size:16px;
    .msg-action{
      margin-left:100px;
      color:#FF430D;
      font-size:13px;
      cursor:pointer;
      opacity: 0;
      transition: opacity .1s;
    }
  }
  .msg-content{
    line-height: 22px;
  }
}
</style>
